<template>
  <view>
    <view v-if="!isEmpty" class="mb-30">
      <view class="grid-body mt-30" @click="goOperation(item)" v-for="(item, index) in reportData" :key="index">
        <view class="treat-list grid-common flex">
          <view class="left-icon"><image src="/static/images/report.png" mode="aspectFill"></image></view>
          <view class="flex column mid-content">
            <view>{{ item.menuName }}</view>
          </view>
          <view class="flex right-arrow"><view class="list-cell-arrow"></view></view>
        </view>
      </view>
    </view>
    <view v-else><Empty></Empty></view>
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
export default {
  components: {
    Empty
  },
  onLoad() {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('app:menu', (data) => {
      this.reportData = data
    })
  },
  data() {
    return {
      isEmpty: false,
      reportData: []
    }
  },
  methods: {
    goOperation({ routerPath, asFrame, menuName }) {
      let url = ''
      if (asFrame === '1') {
        url = routerPath
      } else if (asFrame === '0') {
        url = `/pages/work/report-form/query/view?title=${menuName}&url=${routerPath}`
      }
      if (!url) {
        return
      }
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.treat-list {
  justify-content: space-between;
  align-items: center;

  &:nth-child(n + 2) {
    border-top: 30rpx solid #f5f5f5;
  }

  .left-icon {
    width: 80rpx;
    margin-right: 20rpx;

    image {
      width: 80rpx;
      height: 80rpx;
    }
  }

  .mid-content {
    flex: 1;
    font-size: 32rpx;
  }

  .right-arrow {
    position: relative;
    width: 11%;

    .orange-dot {
      text-align: center;
      background-color: #c87c32;
      color: #fff;
      font-size: 24rpx;
      border-radius: 50%;
      width: 40rpx;
      height: 40rpx;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .list-cell-arrow::before {
      right: 0;
    }
  }
}
</style>
